<template>
  <div class="orders">
    <!-- 顶部 -->
    <NavBar title="订单" />
    <van-tabs v-model="activeName">
      <van-tab title="待付款" :name="1">
        <Ordersitem
          v-for="item in list"
          :key="item.orderNum"
          :id="item.orderNum"
          :type="activeName"
        />
      </van-tab>
      <van-tab title="待发货" :name="0">
        <Ordersitem
          v-for="item in list"
          :key="item.orderNum"
          :id="item.orderNum"
          :type="activeName"
        />
      </van-tab>
      <van-tab title="待收货" :name="2">
        <Ordersitem
          v-for="item in list"
          :key="item.orderNum"
          :id="item.orderNum"
          :type="activeName"
        />
      </van-tab>
      <van-tab title="待评论" :name="3">
        <Ordersitem
          v-for="item in list"
          :key="item.orderNum"
          :id="item.orderNum"
          :type="activeName"
        />
      </van-tab>
      <van-tab title="已完成" :name="4">
        <Ordersitem
          v-for="item in list"
          :key="item.orderNum"
          :id="item.orderNum"
          :type="activeName"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Ordersitem from '@/components/Ordersitem.vue'
export default {
  props: {
    type: {
      default: 0,
      type: [Number, String],
      require: true
    }
  },
  data () {
    return {
      userId: localStorage.getItem('userId'),
      nowPage: 1,
      activeName: 0,
      list: []
    }
  },
  components: {
    Ordersitem
  },
  methods: {
    async loadData () {
      const { data: res } = await this.$post(this.API.API_URL_ORDERS, {
        userId: this.userId,
        type: this.activeName,
        nowPage: this.nowPage
      })
      if (res) this.list = res.orderListData
    }
  },
  created () {
    this.activeName = parseInt(this.type)
    this.loadData()
  },
  watch: {
    activeName (val) {
      this.loadData()
    }
  }
}
</script>
<style scoped>
.orders {
  text-align: left;
}
.orders .van-card {
  padding-top: 0;
}
</style>
